//生产总览组件(测试阶段)
import React, { Component } from 'react';
import { connect } from 'dva';
import { WhiteSpace, ListView,Button ,WingBlank} from 'antd-mobile';
import styles from './ProDay.less';
import ProDayTu from '../Echarts/ProDayTu';
import {ProDayQuery} from '../../../services/remove';
import moment from 'moment';
import PublicService from '../../../services/PublicService'

class ProDay extends Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        });
    
        this.state = {
          visible: false,
          pickerValue: [],
          pickerValue1: [],
          date: null,
          dataSource,
          isLoading: true,
          echarts: [],
          data: [],
          sValue:[],
          pickerValuetext:"",
          sValuetext:"0",
          rows:10
        };
      }
     

      onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
          return;
        }
        this.setState({
          rows:this.state.rows+10
      })
      let data = {
        endTime:moment().format("YYYY-MM-DD 23:59:59"),
        startTime:moment().format("YYYY-MM-DD 00:00:00"),
        page:1,
        rows:this.state.rows
    }
    ProDayQuery({...data}).then(data => {
      console.log(data)
      if(data.data.rc == 0){ 
        this.setState({
          data:data.data.ret.xinxishuju.items,
          echarts:data.data.ret.tuxingshuju
      })

      setTimeout(() => {
       
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
          isLoading: false,
        });
      }, 600);
      }
    
  })
      

      }

    state = {
        data : []
    };
    //页面进入事件
    componentDidMount () {
        let data = {
            endTime:moment().format("YYYY-MM-DD 23:59:59"),
            startTime:moment().format("YYYY-MM-DD 00:00:00"),
            page:1,
            rows:10
        }
        ProDayQuery({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0){ 
              this.setState({
                data:data.data.ret.xinxishuju.items,
                echarts:data.data.ret.tuxingshuju
            })

            setTimeout(() => {
         
              this.setState({
                dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                isLoading: false,
              });
            }, 600);
            }
          
        })
       
          console.log(this.state.dataSource)
    }
    //点击详情事件
    save =  (id) => {
      console.log(id)
      this.props.history.push("/ProDetails");
      PublicService.setCookie("ProdetailsId",id);

    }
 
   
    render() {
      const { data } = this.state;

      const separator = (sectionID, rowID) => (
          <div
              key={`${sectionID}-${rowID}`}
              style={{
                  backgroundColor: "#F5F5F9",
                  height: 8,
                  borderTop: "1px solid #ECECED",
                  borderBottom: "1px solid #ECECED"
              }}
          />
      );
      let index = 0;
    const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
        index = data.length - 1;
    }
    const obj = data[index++];
      // console.log(obj)
      return (
        <div key={rowID} style={{ borderRadius:"15px" }}>
          <div
            style={{
              lineHeight: '50px',
              color: '#888',
              fontSize: 18,
              borderBottom: '1px solid #F6F6F6',
            }}
          >{obj?obj.title:""}</div>
          <div style={{ display: '-webkit-box', display: 'flex', padding: '5px 0' ,height:60, borderRadius:"15px" }}>
          <div className={styles.list_left}
          style={{padding:'5 5'}}
          >
          <p
          className={styles.list_tp}
          ><span style={{color:`${obj?(obj.rank=='重要报警'?'red':'blue'):"#fff"}`,marginRight:5}}>{obj?obj.rank:""}</span>{obj?obj.site:""}</p>
          <p
          className={styles.list_bp}
          >{obj?moment(obj.createTime).format("YYYY-MM-DD HH:mm"):""}</p>
           <Button type="ghost" style={{height:20,fontSize:12,lineHeight:1.5,width:50,position:"absolute",right:14,top:18}} onClick={this.save.bind(this,obj?obj.id:9)}>详情</Button>
          </div>
       
         
            
          </div>
        </div>
      );}
        return (
          <WingBlank>
          <WhiteSpace />
          <div className={styles.containerBottom}>
            <ProDayTu
            data={this.state.echarts}
            />
            </div>
            <WhiteSpace />
            <div className={styles.boxBottom}>
            <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderHeader={() => <span>报警设备/点位名称</span>}
        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
          {this.state.isLoading ? 'Loading...' : 'Loaded'}
        </div>)}
        renderRow={row}
      
        className="am-list"
        pageSize={4}
        useBodyScroll
     
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
      </div>
        
            </WingBlank>

        )
    }
}
function mapStateToProps(state) {
    return {}
}
export default connect()(ProDay)